"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { theme } from "../../constants/theme"

interface WordAffixViewProps {
    word: {
        word: string
        phonetic: string
        meaning: string
        prefix: {
            text: string
            description: string
        }
        root: {
            text: string
            description: string
        }
        explanation: string
    }
}

// 修改模拟数据，添加必要的词缀信息
const SIMILAR_WORDS_DATA = {
    con: [
        {
            word: "conform",
            phonetic: "/kənˈfɔːm/",
            meaning: "符合；遵照；适应",
            prefix: { text: "con", meaning: "一起" },
            root: { text: "form", meaning: "形式" },
            explanation: "一起形成",
        },
        {
            word: "contain",
            phonetic: "/kənˈteɪn/",
            meaning: "包含；容纳；控制",
            prefix: { text: "con", meaning: "一起" },
            root: { text: "tain", meaning: "持有" },
            explanation: "一起持有",
        },
        {
            word: "connect",
            phonetic: "/kəˈnekt/",
            meaning: "连接；联系；贯通",
            prefix: { text: "con", meaning: "一起" },
            root: { text: "nect", meaning: "连接" },
            explanation: "一起连接",
        },
    ],
    stitute: [
        {
            word: "institute",
            phonetic: "/ˈɪnstɪtjuːt/",
            meaning: "建立；设立；机构",
            prefix: { text: "in", meaning: "向内" },
            root: { text: "stitute", meaning: "放" },
            explanation: "向内放置",
        },
        {
            word: "substitute",
            phonetic: "/ˈsʌbstɪtjuːt/",
            meaning: "代替；替换；替代品",
            prefix: { text: "sub", meaning: "在下面" },
            root: { text: "stitute", meaning: "放" },
            explanation: "在下面放置",
        },
        {
            word: "prostitute",
            phonetic: "/ˈprɒstɪtjuːt/",
            meaning: "妓女；滥用；出卖",
            prefix: { text: "pro", meaning: "向前" },
            root: { text: "stitute", meaning: "放" },
            explanation: "向前放置",
        },
    ],
}

export function WordAffixView({ word }: WordAffixViewProps) {
    const [selectedPart, setSelectedPart] = useState<"con" | "stitute">("con")
    const [isPlaying, setIsPlaying] = useState(false)

    const handlePlayAudio = () => {
        setIsPlaying(true)
        setTimeout(() => setIsPlaying(false), 1000)
    }

    const handlePartSelect = (part: "con" | "stitute") => {
        setSelectedPart(part)
    }

    return (
        <View style={styles.container}>
            {/* 词根词缀分析卡片 - 更小更紧凑 */}
            <View style={styles.wordCard}>
                {/* 单词拆分展示 */}
                <View style={styles.wordSplitRow}>
                    <View style={styles.wordSplitContainer}>
                        <TouchableOpacity style={styles.wordTouchable} activeOpacity={0.7} onPress={handlePlayAudio}>
                            <Text style={styles.wordSplit}>
                                <Text style={[styles.prefixText, { color: theme.colors.secondary.red.default }]}>con</Text>
                                <Text style={styles.rootText}>stitute</Text>
                            </Text>
                            <Text style={styles.phoneticText}>{word.phonetic}</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={styles.meaningText}>{word.meaning}</Text>
                </View>

                {/* 词缀选择按钮 */}
                <View style={styles.affixButtonsRow}>
                    <TouchableOpacity
                        style={[styles.affixButton, selectedPart === "con" && styles.affixButtonActive]}
                        onPress={() => handlePartSelect("con")}
                    >
                        <Text style={styles.affixButtonLabel}>前缀</Text>
                        <Text style={[styles.affixButtonText, selectedPart === "con" && styles.affixButtonTextActive]}>con</Text>
                        <Text style={styles.affixButtonMeaning}>一起</Text>
                    </TouchableOpacity>

                    <Text style={styles.plusSign}>+</Text>

                    <TouchableOpacity
                        style={[styles.affixButton, selectedPart === "stitute" && styles.affixButtonActive]}
                        onPress={() => handlePartSelect("stitute")}
                    >
                        <Text style={styles.affixButtonLabel}>词根</Text>
                        <Text style={[styles.affixButtonText, selectedPart === "stitute" && styles.affixButtonTextActive]}>
                            stitute
                        </Text>
                        <Text style={styles.affixButtonMeaning}>放</Text>
                    </TouchableOpacity>
                </View>

                {/* 词源解释 */}
                <View style={styles.explanationContainer}>
                    <Text style={styles.explanationText}>{word.explanation}</Text>
                </View>

                {/* 详细解释 */}
                <View style={styles.detailsContainer}>
                    <Text style={styles.detailText}>
                        <Text style={styles.detailLabel}>con：</Text>
                        {word.prefix.description}
                    </Text>
                    <Text style={styles.detailText}>
                        <Text style={styles.detailLabel}>stitute：</Text>
                        {word.root.description}
                    </Text>
                </View>
            </View>

            {/* 同类词缀单词列表 - 与上方设计保持一致 */}
            <View style={styles.similarWordsCard}>
                <View style={styles.similarWordsHeader}>
                    <View
                        style={[
                            styles.partIndicator,
                            {
                                backgroundColor:
                                    selectedPart === "con" ? theme.colors.secondary.red.default : theme.colors.primary.default,
                            },
                        ]}
                    >
                        <Text style={styles.partIndicatorText}>{selectedPart}</Text>
                    </View>
                    <Text style={styles.similarWordsTitle} numberOfLines={1} ellipsizeMode="tail">
                        同类词缀单词
                    </Text>
                </View>

                {/* 替换单词列表渲染部分 */}
                <View style={styles.wordsList}>
                    {SIMILAR_WORDS_DATA[selectedPart]?.map((item, index) => (
                        <View
                            key={index}
                            style={[
                                styles.wordItem,
                                index === SIMILAR_WORDS_DATA[selectedPart].length - 1 && { borderBottomWidth: 0 },
                            ]}
                        >
                            {/* 单词卡片 - 与主卡片格式完全一致 */}
                            <View style={styles.wordSplitRow}>
                                <View style={styles.wordSplitContainer}>
                                    <TouchableOpacity style={styles.wordTouchable} activeOpacity={0.7} onPress={handlePlayAudio}>
                                        <Text style={styles.wordSplit}>
                                            {selectedPart === "con" ? (
                                                <>
                                                    <Text style={[styles.prefixText, { color: theme.colors.secondary.red.default }]}>
                                                        {item.prefix.text}
                                                    </Text>
                                                    <Text style={styles.rootText}>{item.word.substring(item.prefix.text.length)}</Text>
                                                </>
                                            ) : (
                                                <>
                                                    <Text style={styles.prefixText}>
                                                        {item.word.substring(0, item.word.length - item.root.text.length)}
                                                    </Text>
                                                    <Text style={[styles.rootText, { color: theme.colors.primary.default }]}>
                                                        {item.root.text}
                                                    </Text>
                                                </>
                                            )}
                                        </Text>
                                        <Text style={styles.phoneticText}>{item.phonetic}</Text>
                                    </TouchableOpacity>
                                </View>
                                <Text style={styles.meaningText}>{item.meaning}</Text>
                            </View>

                            {/* 词缀按钮 */}
                            <View style={styles.affixButtonsRow}>
                                <View style={[styles.miniAffixButton, selectedPart === "con" && styles.miniAffixButtonActive]}>
                                    <Text style={styles.miniAffixButtonLabel}>前缀</Text>
                                    <Text
                                        style={[styles.miniAffixButtonText, selectedPart === "con" && styles.miniAffixButtonTextActive]}
                                    >
                                        {item.prefix.text}
                                    </Text>
                                    <Text style={styles.miniAffixButtonMeaning}>{item.prefix.meaning}</Text>
                                </View>

                                <Text style={styles.miniPlusSign}>+</Text>

                                <View style={[styles.miniAffixButton, selectedPart === "stitute" && styles.miniAffixButtonActive]}>
                                    <Text style={styles.miniAffixButtonLabel}>词根</Text>
                                    <Text
                                        style={[styles.miniAffixButtonText, selectedPart === "stitute" && styles.miniAffixButtonTextActive]}
                                    >
                                        {item.root.text}
                                    </Text>
                                    <Text style={styles.miniAffixButtonMeaning}>{item.root.meaning}</Text>
                                </View>
                            </View>

                            {/* 解释 */}
                            <View style={styles.miniExplanationContainer}>
                                <Text style={styles.miniExplanationText}>{item.explanation}</Text>
                            </View>
                        </View>
                    ))}
                </View>
            </View>

            {/* 查找更多按钮 */}
            <TouchableOpacity style={styles.findMoreButton}>
                <Text style={styles.findMoreText}>查找更多同根词</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
    },
    wordCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    wordSplitRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
        paddingBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    wordSplitContainer: {
        flex: 1,
    },
    wordSplit: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
    },
    prefixText: {
        fontWeight: theme.fontWeight.bold,
    },
    rootText: {
        color: theme.colors.neutral.black,
    },
    phoneticText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
        marginTop: 2,
    },
    meaningText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        flex: 1,
        textAlign: "right",
        marginLeft: theme.spacing.md,
    },
    affixButtonsRow: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        marginVertical: theme.spacing.sm,
        gap: theme.spacing.sm,
    },
    affixButton: {
        backgroundColor: `${theme.colors.primary.default}08`,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.sm,
        alignItems: "center",
        minWidth: 80,
        borderWidth: 1,
        borderColor: "transparent",
    },
    affixButtonActive: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderColor: theme.colors.primary.default,
    },
    affixButtonLabel: {
        fontSize: 10,
        color: theme.colors.neutral.gray,
        marginBottom: 2,
    },
    affixButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        fontWeight: theme.fontWeight.semiBold,
        marginBottom: 2,
    },
    affixButtonTextActive: {
        color: theme.colors.primary.default,
    },
    affixButtonMeaning: {
        fontSize: 10,
        color: theme.colors.neutral.darkGray,
    },
    plusSign: {
        fontSize: 16,
        color: theme.colors.neutral.gray,
    },
    explanationContainer: {
        backgroundColor: `${theme.colors.primary.default}05`,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.sm,
        marginVertical: theme.spacing.sm,
    },
    explanationText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        lineHeight: 16,
    },
    detailsContainer: {
        gap: theme.spacing.sm,
    },
    detailText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        lineHeight: 16,
    },
    detailLabel: {
        color: theme.colors.neutral.black,
        fontWeight: theme.fontWeight.semiBold,
    },
    similarWordsCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    similarWordsHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
        paddingBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
        flexWrap: "nowrap",
    },
    partIndicator: {
        width: 28,
        height: 28,
        borderRadius: 14,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.sm,
    },
    partIndicatorText: {
        fontSize: theme.fontSize.xs,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    similarWordsTitle: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        flex: 1,
    },
    wordsList: {
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.small,
        marginBottom: theme.spacing.sm,
    },
    wordItem: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    wordItemHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.xs,
    },
    itemWord: {
        fontSize: theme.fontSize.lg,
        color: theme.colors.neutral.black,
        fontWeight: theme.fontWeight.semiBold,
    },
    highlightPrefix: {
        color: theme.colors.secondary.red.default,
        fontWeight: theme.fontWeight.bold,
    },
    highlightRoot: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.bold,
    },
    itemPhonetic: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
        marginBottom: theme.spacing.xs,
    },
    meaningRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.xs,
    },
    itemMeaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    itemExplanationContainer: {
        backgroundColor: `${theme.colors.primary.default}05`,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.xs,
        marginTop: theme.spacing.xs,
    },
    itemExplanation: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
    },
    audioButton: {
        padding: 2,
    },
    findMoreButton: {
        backgroundColor: `${theme.colors.primary.default}10`,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        alignItems: "center",
        marginTop: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    findMoreText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    // 添加以下新样式
    miniAffixButton: {
        backgroundColor: `${theme.colors.primary.default}08`,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.xs,
        alignItems: "center",
        minWidth: 60,
        borderWidth: 1,
        borderColor: "transparent",
    },
    miniAffixButtonActive: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderColor: theme.colors.primary.default,
    },
    miniAffixButtonLabel: {
        fontSize: 10,
        color: theme.colors.neutral.gray,
        marginBottom: 2,
    },
    miniAffixButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        fontWeight: theme.fontWeight.semiBold,
        marginBottom: 2,
    },
    miniAffixButtonTextActive: {
        color: theme.colors.primary.default,
    },
    miniAffixButtonMeaning: {
        fontSize: 8,
        color: theme.colors.neutral.darkGray,
    },
    miniPlusSign: {
        fontSize: 14,
        color: theme.colors.neutral.gray,
        marginHorizontal: theme.spacing.xs,
    },
    miniExplanationContainer: {
        backgroundColor: `${theme.colors.primary.default}05`,
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.xs,
        marginTop: theme.spacing.xs,
    },
    miniExplanationText: {
        fontSize: 10,
        color: theme.colors.neutral.darkGray,
        lineHeight: 14,
    },
    wordTouchable: {
        padding: theme.spacing.xs,
        borderRadius: theme.borderRadius.small,
        backgroundColor: "transparent",
    },
})

